<template>
  <div class="messageComp">
        <!-- 通过refs调用弹窗组件 -->
  </div>
</template>

<script setup>
import { ref,getCurrentInstance,h } from "vue"
import { useStore } from "vuex";
const store = useStore()
const { appContext,ctx } = getCurrentInstance()
import { ElMessage } from 'element-plus'
import { ElNotification  } from 'element-plus'

const messageInfo = (text)=>{
    ElMessage({
        type:'info',
        message:text,
        duration:3000,
        showClose:true,
    }, appContext)
}
const messageWarning = (text)=>{
    ElMessage({
        type:'warning',
        message:text,
        duration:4000,
        showClose:true,
    }, appContext)
}
const messageSuccess = (text)=>{
    ElMessage({
        type:'success',
        message:text,
        duration:3000,
        showClose:true,
    }, appContext)
}
const messageFail = (text)=>{
    ElMessage({
        type:'error',
        message:text,
        duration:3000,
        showClose:true,
    }, appContext)
}
const messageNetFail = (text)=>{
    ElMessage({
        icon:'Link',
        message:text,
        customClass:'link',
        duration:3000,
        showClose:true,
    }, appContext)
}
// -------- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----通知消息
const notifySuccess = (text) => {
    ElNotification({
        title: '系统消息提示',
        type:'success',
        message: h('i', { style: 'color: teal' }, text),
        duration: 4000,
    })
}
const notifyFail = (text) => {
    ElNotification({
        title: '系统消息提示',
        type:'error',
        message: h('i', { style: 'color: crimson' }, text),
        duration: 3000,
    })
}
const notifyWarning = (text) => {
    ElNotification({
        title: '系统消息提示',
        type:'warning',
        message: h('i', { style: 'color: yellow' }, text),
        duration: 3000,
    })
}
defineExpose({
    messageInfo,
    messageWarning,
    messageSuccess,
    messageFail,
    messageNetFail,
    //---- ----通知消息
    notifySuccess,
    notifyWarning,
    notifyFail,
})
</script>

<style scoped>
.link{
    color: crimson;
    font-size: 25px;
}
.link>p{
    color: gray !important;
    letter-spacing: 2px;
}

</style>